<template>
	<view>
		<view>
			<view>
				<view slot="template">
					<view class="post">
						<image :src="promulgatorImage" class="avatar"></image>
						<view class="info">
							<view class="name">{{ promulgatorName }}</view>
							<view class="time">{{ createTime }}</view>
							<view class="text">{{ content }}</view>
							<view class="image-list"><image v-for="(src, index) in photos" :key="index" :src="src" class="image"></image></view>
							<uni-icons type="hand-up" size="30"></uni-icons>
							<!-- <image class="img" src="../../static/dianzan-before.png"></image>
							<text class="imgText">{{ likeCount }}</text> -->
							<image v-show="like.indexOf(userId.toString()) === -1" class="img" src="../../static/dianzan-before.png" @click="giveThumbs()"></image>
							<image v-show="like.indexOf(userId.toString()) !== -1" class="img" src="../../static/dianzan-after.png" @click="giveThumbs()"></image>
							<text class="imgText">{{ likeCount }}</text>
						</view>
						
					</view>
				</view>
			</view>
			<view>
				<view class="allComment">全部评论</view>
				<view class="tab-bar">
					<view class="tab-item" v-for="(item, index) in tabList" :key="index" :class="currentTab === index ? 'active' : ''" @click="changeTab(index)">
						<text :style="{ fontSize: currentTab === index ? '32rpx' : '26rpx' }">{{ item }}</text>
					</view>
					<view class="tab-line" :style="{ left: (currentTab * 100) / tabList.length + '%' }"></view>
				</view>
				<view class="tab-content">
					<view v-if="currentTab === 0">
						<view slot="template">
							<list v-for="one in list">
								<view class="post1" v-if="one.comments == null">
									<image :src="one.promulgatorImage" class="avatar"></image>
									<view class="info">
										<view class="name">{{ one.promulgatorName }}</view>
										<view class="time">{{ one.createTime }}</view>
										<view class="text1">{{ one.content }}</view>
									</view>
									
									<image v-show="one.like.indexOf(userId.toString()) === -1" class="img1" src="../../static/dianzan-before.png" @click="giveCommentThumbs(one.id)"></image>
									<image v-show="one.like.indexOf(userId.toString()) !== -1" class="img1" src="../../static/dianzan-after.png" @click="giveCommentThumbs(one.id)"></image>
									<text class="imgText1">{{ one.likeCount }}</text>
									<view class="reply2" @click="reply(one.id, one.promulgatorName, one.content)">回复</view>
								</view>
								<view class="post1" v-if="one.comments != null">
									<image :src="one.comments[0].promulgatorImage" class="avatar"></image>
									<view class="info">
										<view class="name">{{ one.comments[0].promulgatorName }}</view>
										<view class="time">{{ one.createTime }}</view>
										<view class="replyComment">[{{ one.promulgatorName }}] : {{ one.content }}</view>
										<view class="text1">{{ one.comments[0].content }}</view>
									</view>
									<image v-show="one.like.indexOf(userId.toString()) === -1" class="img1" src="../../static/dianzan-before.png" @click="giveCommentThumbs(one.id)"></image>
									<image v-show="one.like.indexOf(userId.toString()) !== -1" class="img1" src="../../static/dianzan-after.png" @click="giveCommentThumbs(one.id)"></image>
									<text class="imgText1">{{ one.likeCount }}</text>
									<view class="reply2" @click="reply(one.id, one.comments[0].promulgatorName, one.comments[0].content)">回复</view>
								</view>
							</list>
						</view>
					</view>
					<view v-if="currentTab === 1">
						<view slot="template">
							<list v-for="one in list">
								<view class="post1" v-if="one.comments == null">
									<image :src="one.promulgatorImage" class="avatar"></image>
									<view class="info">
										<view class="name">{{ one.promulgatorName }}</view>
										<view class="time">{{ one.createTime }}</view>
										<view class="text1">{{ one.content }}</view>
									</view>
									
									<image v-show="one.like.indexOf(userId.toString()) === -1" class="img1" src="../../static/dianzan-before.png" @click="giveCommentThumbs(one.id)"></image>
									<image v-show="one.like.indexOf(userId.toString()) !== -1" class="img1" src="../../static/dianzan-after.png" @click="giveCommentThumbs(one.id)"></image>
									<text class="imgText1">{{ one.likeCount }}</text>
									<view class="reply2" @click="reply(one.id, one.promulgatorName, one.content)">回复</view>
								</view>
								<view class="post1" v-if="one.comments != null">
									<image :src="one.comments[0].promulgatorImage" class="avatar"></image>
									<view class="info">
										<view class="name">{{ one.comments[0].promulgatorName }}</view>
										<view class="time">{{ one.createTime }}</view>
										<view class="replyComment">[{{ one.promulgatorName }}] : {{ one.content }}</view>
										<view class="text1">{{ one.comments[0].content }}</view>
									</view>
									<image v-show="one.like.indexOf(userId.toString()) === -1" class="img1" src="../../static/dianzan-before.png" @click="giveCommentThumbs(one.id)"></image>
									<image v-show="one.like.indexOf(userId.toString()) !== -1" class="img1" src="../../static/dianzan-after.png" @click="giveCommentThumbs(one.id)"></image>
									<text class="imgText1">{{ one.likeCount }}</text>
									<view class="reply2" @click="reply(one.id, one.comments[0].promulgatorName, one.comments[0].content)">回复</view>
								</view>
							</list>
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="input-wrap" :class="{ active: isInputActive }">
			<view>
				<view v-if="dialogVisible == true" class="reply">回复[{{ replyName }}] : {{ replyContent }}</view>
				<button class="btn" size="mini" @click="input" :disabled="value == '' ? true : false">发表</button>
				<input type="text" v-model="value" class="input" ref="input" placeholder="我来评论" @blur="onBlur" />
			</view>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userId:'',
			isInputActive: false,
			promulgator: '',
			promulgatorImage: '',
			promulgatorName: '',
			createTime: '',
			content: '',
			likeCount: '',
			commentsCount: '',
			photos: [],
			list: [],
			tabList: ['最新', '推荐'],
			currentTab: 0,
			dynamicsId: '',
			dialogVisible: false,
			replyContent: '', // 回复内容,
			isThis: '',
			value: '',
			isContent: false,
			replyName: '',
			replyContent: '',
			replyImage: '',
			haveChildComment: null,
			commentId: '',
			city:'',
			like:'',
		};
	},
	onLoad(options) {
		this.dynamicsId = options.id;
		this.city = options.city;
		this.userId = uni.getStorageSync('userId');
		this.loadDetail(options.id);
		this.loadComments(options.id);
	},
	methods: {
		giveCommentThumbs(id){
			let that = this;
			let encodeId = encodeURIComponent(id);
			that.ajax(that.url.giveCommentThumbs + "?dynamicId=" + that.dynamicsId + "&city=" + that.city + "&commentId=" + encodeId, "GET", null, function(resp){
				if(resp.data.result == true){
					uni.showToast({
						icon:'none',
						title:'点赞成功！'
					})
					if(that.currentTab == 0){
						that.loadComments(that.dynamicsId);
					}else if(that.currentTab == 1){
						that.loadHotComments(that.dynamicsId);
					}
					
				}else if(resp.data.result == false){
					uni.showToast({
						icon:'none',
						title:'取消点赞成功！'
					})
					if(that.currentTab == 0){
						that.loadComments(that.dynamicsId);
					}else if(that.currentTab == 1){
						that.loadHotComments(that.dynamicsId);
					}
				}
			})
		},
		giveThumbs(){
			let that = this;
			that.ajax(that.url.giveThumbs + "?dynamicId=" + that.dynamicsId + "&city=" + that.city, "GET", null, function(resp){
				if(resp.data.result == true){
					uni.showToast({
						icon:'none',
						title:'点赞成功！'
					})
					that.loadDetail(that.dynamicsId);
				}else if(resp.data.result == false){
					uni.showToast({
						icon:'none',
						title:'取消点赞成功！'
					})
					that.loadDetail(that.dynamicsId);
				}
			})
		},
		onBlur() {
			this.dialogVisible = false;
		},
		input() {
			let that = this;
			if (this.value == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入评论内容~'
				});
				return;
			}
			const reg = /([^a-zA-Z\u4e00-\u9fa5]{16,})/g;
			const isMatch = reg.test(this.value);
			if (isMatch) {
				uni.showToast({
					icon: 'none',
					title: '除文字外，不能连续输入超过16个字符！'
				});
				return;
			}
			let data1 = {
				content: that.replyContent,
				promulgatorImage: uni.getStorageSync('avatar'),
				promulgatorName: this.replyName,
				promulgator: this.commentId,
				city:this.city,
				comments: [
					{
						content: that.value,
						promulgatorImage: uni.getStorageSync('avatar'),
						promulgatorName: uni.getStorageSync('username'),
						promulgator: uni.getStorageSync('userId'),
						likeCount: 0,
						commentsCount: 0
					}
				]
			};
			let data2 = {
				content: that.value,
				promulgatorImage: uni.getStorageSync('avatar'),
				promulgatorName: uni.getStorageSync('username'),
				promulgator: uni.getStorageSync('userId'),
				city:this.city,
			};
			if (this.replyName != '' && this.replyContent != '') {
				console.log(that.commentId, 'commentId');
				console.log("?dynamicId=" , that.dynamicsId)
				that.ajax(that.url.insertComment + '/' + that.commentId + "?dynamicId=" + that.dynamicsId, 'POST', data1, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '回复成功！'
					});
					that.value = '';
					if(that.currentTab == 0){
						that.loadComments(that.dynamicsId);
					}else if(that.currentTab == 1){
						that.loadHotComments(that.dynamicsId);
					}
					that.dialogVisible = false;
					that.replyName = '';
					that.replyContent = '';
					return;
				});
			} else {
				that.ajax(that.url.addComment + '/' + that.dynamicsId, 'POST', data2, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '评论发表成功！'
					});
					that.value = '';
					if(that.currentTab == 0){
						that.loadComments(that.dynamicsId);
					}else if(that.currentTab == 1){
						that.loadHotComments(that.dynamicsId);
					}
					that.replyName = '';
					that.replyContent = '';
					that.dialogVisible = false;
				});
			}
		},
		reply(id, promulgatorName, content) {
			this.isThis = id;
			this.commentId = id;
			if (this.dialogVisible == false) {
				this.dialogVisible = true;
				this.replyName = promulgatorName;
				this.replyContent = content;
			} else if (this.dialogVisible == true) {
				this.dialogVisible = false;
				this.replyName = '';
				this.replyContent = '';
			}
		},
		changeTab(index) {
			this.currentTab = index;
			if (this.currentTab == 0) {
				this.loadComments(this.dynamicsId);
			} else if (this.currentTab == 1) {
				this.loadHotComments(this.dynamicsId);
			}
		},
		loadHotComments(id){
			let that = this;
			that.ajax(that.url.getHotComments + '?dynamicId=' + id, 'GET', null, function(resp) {
				that.list = resp.data.result;
			});
		},
		loadComments(id) {
			let that = this;
			that.ajax(that.url.getComments + '?dynamicId=' + id, 'GET', null, function(resp) {
				that.list = resp.data.result;
			});
		},
		loadDetail(id) {
			let that = this;
			that.ajax(that.url.detail + '?dynamicId=' + id, 'GET', null, function(resp) {
				that.promulgator = resp.data.result.promulgator;
				that.promulgatorImage = resp.data.result.promulgatorImage;
				that.promulgatorName = resp.data.result.promulgatorName;
				that.createTime = resp.data.result.createTime;
				that.content = resp.data.result.content;
				that.photos = resp.data.result.photos;
				that.likeCount = resp.data.result.likeCount;
				that.commentsCount = resp.data.result.commentsCount;
				that.like = resp.data.result.like;
			});
		},
		handleLike(one) {
			// 点赞处理
			one.likeCount = one.likeCount + 1;
		},
		handleComment(one) {
			// 评论处理
			one.commentsCount = one.commentsCount + 1;
		}
	}
};
</script>

<style>
	.allComment{
		font-size: 40rpx;
		padding: 18rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		background-color: #fff;
		margin-top: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 5rpx #ccc;
		margin-bottom: 10rpx;
		font-weight: 550;
	}
.imgText {
	/* position: absolute; */
	margin-left: 480rpx;
}
.imgText1 {
	/* position: absolute; */
	/* margin-left: 480rpx; */
	margin-right: 13rpx;
	margin-top: 20rpx;
}
.img {
	position: absolute;
	margin-left: 400rpx;
	margin-top: 10rpx;
	width: 72rpx;
	height: 63rpx;
}
.img1 {
	position: absolute;
	margin-left: 520rpx;
	margin-top: 10rpx;
	width: 72rpx;
	height: 63rpx;
}
.replyComment {
	background-color: #f2f2f2;
	padding-top: 18rpx;
	padding-bottom: 30rpx;
	padding-right: 10rpx;
	margin-right: 60rpx;
	font-size: 28rpx;
	color: forestgreen;
}
.reply {
	font-size: 30rpx;
	margin-bottom: 10rpx;
	color: #888;
}
.btn {
	position: absolute;
	margin-left: 525rpx;
	margin-top: 8rpx;
	background-color: #007aff;
	color: white;
}
.input-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 45rpx;
	background-color: #fff;
	z-index: 999;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	opacity: 1;
	transition: all 0.3s ease;
}

.input-wrap.active {
	transform: translate3d(0, -100%, 0);
}

.input {
	/* margin-left: 110rpx; */
	width: 450rpx;
	height: 70rpx;
	border: 10rpx;
	font-size: 14px;
	line-height: 1.5;
	outline: none;
	background-color: #f6f6f6;
}

.reply1 {
	margin-left: 325rpx;
	margin-top: 10rpx;
	color: yellowgreen;
}
.reply2 {
	position: absolute;
	margin-top: 105rpx;
	margin-left: 550rpx;
	color: yellowgreen;
}
.tab-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 450rpx;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	flex-direction: row;
	background-color: #fff;
}

.tab-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	height: 100%;
	color: #333333;
	font-size: 14px;
	position: relative;
}

.tab-item:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background-color: #007aff;
	transform: scaleX(0);
	transition: transform 0.2s ease;
	transform-origin: 2 2;
}

.tab-item.active {
	color: #007aff;
	font-size: 16px;
}

.tab-item.active:after {
	transform: scaleX(1);
}

.tab-content {
	margin-top: 10px;
	padding: 0 12px;
	padding-bottom: 250rpx;
}
.container {
	background-color: #f8f8f8;
}
.search {
	display: flex;
	flex-direction: row;
	/* align-items: flex-start; */
	/* padding: 20rpx; */
	background-color: #fff;
	/* margin-top: 10rpx; */
	/* border-radius: 20rpx; */
	/* box-shadow: 0 0 20rpx #ccc; */
}
.post {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 40rpx;
	background-color: #fff;
	/* margin-top: 20rpx; */
	border-radius: 20rpx;
	/* box-shadow: 0 0 20rpx #ccc; */
}
.post1 {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 40rpx;
	background-color: #fff;
	margin-top: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 20rpx #ccc;
}
.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.info {
	margin-left: 20rpx;
	flex: 1;
}
.name {
	font-weight: bold;
	font-size: 36rpx;
}
.time {
	color: #888;
	font-size: 25rpx;
	margin-top: 10rpx;
}
.text {
	font-size: 32rpx;
	margin-top: 10rpx;
}
.image-list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10rpx;
}
.image {
	width: 200rpx;
	height: 200rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
.actions {
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}
.like,
.comment {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 30rpx;
	font-size: 28rpx;
	color: #888;
	cursor: pointer;
}
.text {
	margin-left: 10rpx;
}
.text1 {
	width: 400rpx;
	font-size: 28rpx;
}
</style>
